<template>
  <div class="win">
    <div class="setting" @click="openSetting">设置</div>
    <div class="main">
    <div v-for="item in keyList" :key="item.key" class="keyItem"></div>
    <div class="status">
      <div id="perfect">perfect</div>
      <div id="good">good</div>
      <div id="miss">miss</div>
    </div>
  </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onBeforeMount,
  onMounted,
  watchEffect,
  nextTick,
  onUnmounted,
} from "vue";
import { keyboardEvent, nodeEvent } from "./GameDemoModules/gameDemoJs";
let keyList = ref([{ key: 0 }, { key: 1 }, { key: 2 }, { key: 3 }]);
const data = reactive({});
onBeforeMount(() => {
  //console.log('2.组件挂载页面之前执行----onBeforeMount')
});
let timer;
onMounted(() => {
  keyboardEvent();
});
onUnmounted(() => {
  clearInterval(timer);
});
nextTick(() => {
  timer = setInterval(() => {
    let id = Date.now() + "" + Math.floor(Math.random() * 10000 + 9999);
    let randomNum = Math.floor(Math.random() * 4);
    let el = document.getElementsByClassName("keyItem")[randomNum];
    nodeEvent(el, randomNum, id);
  }, 500);
});
const settingModelRef = ref();
const openSetting = () => {
  console.log(settingModelRef.value)
  // settingModelRef.value.dialogPopVisible = true
}
watchEffect(() => {});
// 使用toRefs解构
</script>
<style lang="less">
.setting{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.main {
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow: hidden;
  .keyItem {
    background: black;
    box-sizing: border-box;
    height: 100%;
    width: 120px;
    border-top: #ccc solid 1px;
    border-bottom: #ccc solid 1px;
    border-left: #ccc solid 1px;
    // animation-fill-mode: none;
    position: relative;
    & > * {
      width: 118px;
      height: 40px;
      background: #ccc;
      animation: fall 2s linear forwards;
      position: absolute;
    }
    &:last-child {
      border-right: #ccc solid 1px;
    }
  }
  .status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: bolder;
    color: white;
    #perfect {
      display: none;
    }
    #good {
      display: none;
    }
    #miss {
      display: none;
    }
  }
}
@keyframes fall {
  0% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
  100% {
    top: 200%;
  }
}
</style>
